<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <!--引入Elementui组件-->
    <!-- 引入样式
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
    -->
    <!-- 引入组件库
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>
    -->

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
    <style>
        /*二级导航*/
        .my-list-ejdh {
            border: 1px solid #E5E5E5;
            height: 40px;
            top: 20px;
        }

        /*二级导航下的分类*/
        .my-list-ejdh-a {
            display: block;
            float: left;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            margin: 5px 5px;
        }

        .my-list-ejdh a:hover {
            color: #FF4400;
        }

        /*排序*/
        .my-list-paixu {
            border: 1px solid #E5E5E5;
            height: 50px;
            background-color: #fff;
            margin-top: 30px;
        }

        .my-list-paixu-a {
            display: block;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            float: left;
        }

        .my-list-paixu-a:hover {
            background-color: #FF4400;
            color: #fff;
        }

        /*表示当前分类被选中*/
        .catalogList-active {
            color: #FF4400;
        }
    </style>
    <script>
        $(function () {
            //纵向导航列表的二级导航的显示和隐藏
            $(".my-daohang2 li").mouseenter(function () {
                $(".my-daohang2-2").show();
            });
            $(".my-daohang2 li").mouseleave(function () {
                $(".my-daohang2-2").hide();
            });
            $(".my-daohang2-2").mouseenter(function () {
                $(this).show();
            });
            $(".my-daohang2-2").mouseleave(function () {
                $(this).hide();
            });

            //轮播下方促销图片的悬停事件
            $(".my-cximg").mouseenter(function () {
                $(this).css({"border-color": "#FF5722"});
            });
            $(".my-cximg").mouseleave(function () {
                $(this).css({"border-color": "#FFF"});
            });

            //回到顶部按钮
            $("#my-backtop").click(function () {
                $("html,body").animate({
                    scrollTop: 0
                }, 500);
            });

            //鼠标滚动事件，显式回到顶部按钮
        });
    </script>
</head>


<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body">
    <!--横向导航栏-->
    <div class="my-daohang1">
        <div class="layui-container">
            <div class="layui-row">
                <!--菜单-->
                <div class="layui-col-md9" style="height: 50px;">
                    <a href="">首页</a>
                    <a href="">优抢购</a>
                    <a href="">聚划算</a>
                    <a href="">大转盘</a>
                    <a href="">会员折扣</a>
                    <a href="">买家秀</a>
                </div>
            </div>
        </div>
    </div>
    <!--横向导航end-->


    <!--促销活动部分-->
    <div class="my-cuxiaodiv">

    </div>
    <!--促销活动部分end-->
    <!-- 二级导航部分 -->
    <div class="my-list-ejdh layui-container">
        <p id="catalogList">
            <strong class="my-list-ejdh-a">分类：</strong>
        </p>
    </div>
    <!--排序-->
    <div class="my-list-paixu layui-container">
        <a href="" class="my-list-paixu-a">按销量</a>
        <a href="" class="my-list-paixu-a">按评分</a>
        <a href="" class="my-list-paixu-a">价格升序</a>
        <a href="" class="my-list-paixu-a">价格降序</a>
    </div>
    <!--二级导航部分end-->

    <!--商品展示部分-->
    <div class="layui-container my-goods" style="border-radius: 0px;top: 10px;">
        <!--商品列表-->
        <div class="my-goods-list layui-row" id="my-goods-list-pager">
            <!--以下是商品详情div-->
        </div>
    </div>
    <!--商品展示部分end-->

    <!-- 分页 -->
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <div id="test1"></div>
    </div>
    <!-- 分页end -->

    <!--引入底部-->
    <div class="my-footer">
        <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
    </div>
    <!--引入底部end-->
    <!--回到顶部按钮-->
    <div id="my-backtop">
        <span class="layui-icon layui-icon-up"></span>
    </div>

</div>

</body>
<script>

    let catalogList = [];
    let itemsList = []; //当前分类的商品集合
    //let laypage;

    window.onload = initCurrentItemsList();

    function initCurrentItemsList() {
        //尝试从本地缓存中取出保存的商品分类集合。
        if (localStorage.getItem("catalogList") != null) {
            catalogList = JSON.parse(localStorage.getItem("catalogList"));
            console.log("-----商品分类集合是-------");
            console.log(catalogList);
            changeCatalog('-1', 'all');
        }
    }

    function changeCatalog(index, catalogName) {
        console.log('改变当前分类,当前下标是：' + index + ",分类名字：" + catalogName);
        $("#catalogList").empty(); //清空节点
        let html = "";
        if (index == '-1') {
            html = "<strong class=\"my-list-ejdh-a\">分类：</strong>" +
                "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a catalogList-active\" onclick=\"changeCatalog('-1','all');\">" + '全部' + "</a>";
        } else {
            html = "<strong class=\"my-list-ejdh-a\">分类：</strong>" +
                "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a \" onclick=\"changeCatalog('-1','all');\">" + '全部' + "</a>";
        }
        for (let i = 0; i < catalogList.length; i++) {
            if (index == i) {
                html += "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a catalogList-active\" onclick=\"changeCatalog('" + i + "','" + catalogList[i].catalog + "')\">" + catalogList[i].catalog + "</a>";
            } else {
                html += "<a href=\"javascript:void(0);\" class=\"my-list-ejdh-a \" onclick=\"changeCatalog('" + i + "','" + catalogList[i].catalog + "')\">" + catalogList[i].catalog + "</a>";
            }
        }
        $("#catalogList").append(html);

        //发送异步请求获取当前的商品集合
        $.ajax({
            url: "https://localhost:8443/xiaomimall/items/catalog?catalogName=" + catalogName,
            type: "GET",
            dataType: "text",
            success: function (resp) {
                let result = JSON.parse(resp);
                if (result.code === 200) {
                    console.log('获取商品集合信息成功！');
                    //console.log(result.data);
                    itemsList = result.data;
                    console.log(itemsList);
                    layui.use(['element', 'carousel', 'laypage'], function () {
                        var element = layui.element;
                        var carousel = layui.carousel;
                        laypage = layui.laypage;

                        //建造分页实例
                        laypage.render({
                            elem: 'test1'
                            , theme: '#FF5722'
                            , width: '100%' //设置容器宽度
                            , arrow: 'always' //始终显示箭头
                            , count: itemsList.length
                            , curr: 1  //当前的分页
                            , limit: 8 //每一页显示8条记录
                            //点击分页按钮要执行的语句
                            , jump: function (obj) {
                                //模拟渲染
                                document.getElementById('my-goods-list-pager').innerHTML = function () {
                                    var arr = []
                                        , thisData = itemsList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                                    console.log("分页数据是："+thisData);

                                    layui.each(thisData, function (index, item) {
                                        console.log("商品对象的价格："+item.price);

                                        arr.push('<div class="goods-mess layui-col-md3">\n' +
                                            '\t\t\t\t\t\t<!--产品图片-->\n' +
                                            '\t\t\t\t\t\t<div class="goods-img">\n' +
                                            '\t\t\t\t\t\t\t<a href="goodsMess.html?id='+item.id+'">\n' +
                                            '\t\t\t\t\t\t\t\t<img src="' + item.pic + '" />\n' +
                                            '\t\t\t\t\t\t\t</a>\n' +
                                            '\t\t\t\t\t\t</div>\n' +
                                            '\t\t\t\t\t\t<!--产品价格-->\n' +
                                            '\t\t\t\t\t\t<p class="goods-price">￥' + item.price + '</p>\n' +
                                            '\t\t\t\t\t\t<!--产品销量-->\n' +
                                            '\t\t\t\t\t\t<p class="goods-sellnum">月销：1000笔</p>\n' +
                                            '\t\t\t\t\t\t<!--产品标题-->\n' +
                                            '\t\t\t\t\t\t<p class="goods-biaoti">\n' +
                                            '\t\t\t\t\t\t\t<a href="goodsMess.html">\n' +
                                            '\t\t\t\t\t\t\t\t' + item.name + '\n' +
                                            '\t\t\t\t\t\t\t</a>\n' +
                                            '\t\t\t\t\t\t</p>\n' +
                                            '\t\t\t\t\t</div>');
                                    });
                                    return arr.join('');
                                }();
                            }
                        });
                    });
                }
            }
        });
    }
</script>
</html>
